/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-07-12 16:15:44
 * @filename : src/common/country.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    ListView,
    RecyclerViewBackedScrollView
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class Country extends Component {

    constructor(props) {
        super(props);
        this.state = {
             country : this.props.country
        }
    }

    onCountryChange(data) {
        this.setState({country:data});
        this.props.callbackParent(data);
    }

    renderRow(rowData) {
        let jsx;
        if (this.state.country == rowData.value) {
             jsx = <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={()=>this.onCountryChange(rowData.value)}>
                      <Text numberOfLines={1} style={styles.itemText}>{rowData.label}</Text>
                      <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> 
                   </TouchableOpacity>
        } else {
             jsx = <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={()=>this.onCountryChange(rowData.value)}>
                      <Text numberOfLines={1} style={styles.itemText}>{rowData.label}</Text>
                   </TouchableOpacity>
        }
        return (jsx);
    }

    render() {
        let data = ds.cloneWithRows(JSON.parse(Store.local_country));
        return (
            <ListView
              dataSource={data}
              initialListSize={10}
              pageSize={10}
              renderRow={this.renderRow.bind(this)}
              renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
            />
            
        );
    }
}


const styles = StyleSheet.create(Css.CountryStyle);

export default Country;